<script setup>
import { ref } from 'vue'
import applicationNew from '@/components/video/analysis/applicationNew.vue'
import { getAlgorithmList } from '@/assets/api/device'
import { useUserStore } from '@/stores/index'
const userStore = useUserStore()

const props = defineProps({
    ruleVisible: {
        type: Boolean,
        required: true,
    },
    videoItem: {
        type: Object,
        default() {
            return {}
        },
    },
})
const visible = ref(false)
const visibleTitle = ref()
const checkList = ref([])
const ruleList = ref([])
const emits = defineEmits(['update:ruleVisible', 'success'])
const ruleItem = ref()
function addApplication(item) {
    ruleItem.value = { ...item, ...props.videoItem }
    visible.value = true
    visibleTitle.value = '新建应用规则'
}
function ruleCloseAction() {
    emits('update:ruleVisible', false)
}
function getData() {
    getAlgorithmList({
        license_information: userStore.systemInfo.gatewayPermit,
    }).then((res) => {
        ruleList.value = res.data.filter((item) => {
            return (
                // item.algorithm_name == '区域入侵' ||
                item.connection_status == 'False'
            )
        })
    })
}
function successStatu() {
    emits('success')
}
getData()
defineExpose({
    checkList,
})
</script>
<template>
    <el-dialog
        :model-value="ruleVisible"
        title="应用规则选择"
        width="800px"
        @close="ruleCloseAction"
    >
        <div>
            说明：蓝色标注为商城购买的付费算法。若已购买的算法未出现在列表中，则该算法可同时部署数量已达上限。如需继续部署，请前往商城购买更多许可，或取消其他正在使用该算法的任务。
        </div>
        <div class="dflex d-flex-start wrap">
            <div
                v-for="item in ruleList"
                :key="item.id"
                class="flex-column-bw d-flex-middle margin cursor ps-re mr-10"
                @click="addApplication(item)"
                :style="
                    item.connection_status == 'False' ? 'color:#1d39c4' : ''
                "
            >
                <div
                    :class="`icon iconf-${item.ico}`"
                    v-if="item.connection_status !== 'False'"
                ></div>
                <el-badge
                    :value="item.algorithm_count"
                    class="badgeItem"
                    v-else
                >
                    <div :class="`icon iconf-${item.ico}`"></div>
                </el-badge>
                <div class="mt-10">{{ item.algorithm_name }}</div>
            </div>
        </div>
    </el-dialog>
    <applicationNew
        v-model:visible="visible"
        v-if="visible"
        :visibleTitle="visibleTitle"
        :ruleItem="ruleItem"
        @close="ruleCloseAction"
        @success="successStatu"
    ></applicationNew>
</template>
<style lang="scss" scoped>
.icon::before {
    font-size: 0.13rem !important;
}
</style>
